<template>
  <div>
  	<div class="header">
  		<div class="header-left">
  			<span class="iconfont back-icon">&#xe658;</span>
  		</div>
  		<div class="header-input">
  			<a href="#" class="linkarea">
  				<span class="iconfont">&#xe6a2;</span>
  				<span>输入城市/景点/游玩主题</span>
  			</a>
  		</div>
		<router-link to="/city">
			<div class="header-right">
				<a href="#" class="linkarea-right">
					<span class="nav-city">{{this.city}}</span>  				
						<span class="iconfont">&#xe843;</span>
				</a>
			</div>
		</router-link>
  	</div>
  </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
  name: 'HomeHeader',
  computed:{
	  ...mapState(['city'])
  }
}

</script>

<style lang="stylus" scoped>


	.header
		height: .88rem
		display:flex
		background-color:#00bcd4
		.header-left
			width: .4rem
			height:.88rem
			padding:0 .2rem 0
			float:left
			line-height:.88rem
			.back-icon
				font-size: .5rem
				color:#fff
		.header-input
			width:6rem
			height:.6rem
			margin:.14rem 0
			background-color:#fff
			line-height:.6rem
			padding-left:.2rem
			border-radius: .1rem
			.linkarea
				height:100%
				color:#e4e7ea
		.header-right
			min-width:1.52rem
			padding: 0 .1rem
			height:.88rem
			line-height:.88rem
			text-align:center
			.linkarea-right
				color:#fff
			.right-icon
				font-size: .4rem



</style>
